<template>
    <div class="box">
        <div class="top">
            <div class="left">
                <dv-decoration-3 style="width:250px;height:30px;" />
            </div>
            <div class="middle">
                <dv-decoration-11 style="width:200px;height:60px;">dv-decoration-11</dv-decoration-11>
            </div>
            <div class="right">
                <dv-decoration-3 style="width:250px;height:30px;" />
            </div>
        </div>
        <div class="center">
            <div class="item">
                <dv-border-box-8>dv-border-box-8</dv-border-box-8>
            </div>
            <div class="item">
                <dv-border-box-8>dv-border-box-8</dv-border-box-8>
            </div>
            <div class="item">
                <dv-border-box-8>dv-border-box-8</dv-border-box-8>
            </div>
            
        </div>
        <div class="bottom">
            <div class="item">
                <dv-border-box-8>dv-border-box-8</dv-border-box-8>
            </div>
            <div class="item">
                <dv-border-box-8>dv-border-box-8</dv-border-box-8>
            </div>
            <div class="item">
                <dv-border-box-8>dv-border-box-8</dv-border-box-8>
            </div>
            
        </div>
    </div>
</template>

<script setup>

</script>

<style scoped>
.box{
    height: 100%;
    width: 100%;
}
.top{
    height: 80px;
    display: flex;
    justify-content: space-around;
    align-items: center;
}
.center{
    height: 600px;
    display: flex;
}
.center .item{
    flex: 1;
}
.center .item:nth-child(2){
    flex: 2;
}
.bottom{
    height: 400px;
    display: flex;
    justify-content: space-around;
}
.bottom .item{
    flex: 1;
}
</style>